<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <title>后台管理，您需要登录才可使用...</title>
    <link rel="icon" href="images/leaf.ico" type="image/x-icon" />
    <link rel="stylesheet" href="nclogin/css/font-awesome.css" />
    <link href="nclogin/css/login.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="nclogin/js/jquery.js"></script>
    <script src="nclogin/js/jquery.supersized.min.js"></script>
    <style type="text/css">
        div.help-block{color:#fff;font-size:13px;text-align:right;}
    </style>
</head>
<body>
<div class="login-layout">
    <div class="top">
        <h5><em></em></h5>
        <h2>后台管理中心</h2>
        <h6>商城&nbsp;&nbsp;|&nbsp;&nbsp;微信&nbsp;&nbsp;|&nbsp;&nbsp;博文&nbsp;&nbsp;|&nbsp;&nbsp;视频教程&nbsp;&nbsp;|&nbsp;&nbsp;统计</h6>
    </div>
    <form id="form_login" action="" method="post">
        <div class="lock-holder">
            <div class="form-group pull-left input-username">
                <label>账号</label>
                <div class="form-group field-managerloginform-username required">
                    <label class="control-label" for="managerloginform-username">账号</label>
                    <input type="text" id="managerloginform-username" class="input-text" name="username" placeholder="用户名" aria-required="true">
                    <div class="help-block"></div>
                </div>
            </div>
            <i class="fa fa-ellipsis-h dot-left"></i>
            <div class="form-group pull-right input-password-box">
                <label>密码</label>
                <div class="form-group field-managerloginform-password required">
                    <label class="control-label" for="managerloginform-password">密码</label>
                    <input type="password" id="managerloginform-password" class="input-text" name="password" placeholder="密码" aria-required="true">
                    <div class="help-block"></div>
                </div>
            </div>
            <i class="fa fa-ellipsis-h dot-left"></i>
            <div class="form-group pull-right input-password-box" style="margin-top:20px;">
                <label>验证</label>
                <input type="password" class="input-text" id="code" name="code" placeholder="" aria-required="true">
                <img src="nclogin/images/02.png" style="position:absolute;top:50px;left:0px;width:100px;height:35px;">
            </div>
        </div>
        <div class="avatar">
            <img src="nclogin/images/admin.png">
        </div>
        <div class="submit">
            <span>
                <input type="hidden" name="_csrf" value="">
                <input name="" class="input-button btn-submit" type="submit" value="登录"/>
            </span>
        </div>
        <div class="submit2">
            <span id="msg"></span>
        </div>
    </form>
    <div class="bottom"></div>
</div>
<script>
    $(function(){
        $.supersized({
            slide_interval     : 4000,
            transition         : 1,
            transition_speed   : 1000,
            performance        : 1,
            min_width          : 0,
            min_height         : 0,
            vertical_center    : 1,
            horizontal_center  : 1,
            fit_always         : 0,
            fit_portrait       : 1,
            fit_landscape      : 0,
            slide_links        : 'blank',
            slides             : [
                {image : 'nclogin/images/1.jpg'},
                {image : 'nclogin/images/2.jpg'},
                {image : 'nclogin/images/3.jpg'},
                {image : 'nclogin/images/4.jpg'},
                {image : 'nclogin/images/5.jpg'}
            ]

        });
        //获取input相关事件源对象
        var oUsername = document.querySelector('#managerloginform-username');
        var oPassword = document.querySelector('#managerloginform-password');
        var oCode = document.querySelector('#code');
        var oMsg = document.querySelector('#msg');
        //设置正则表达式
        //用户名长度为6-10的小写字母，大写字母、下划线、中划线
        var regUsername = /^[a-zA-Z_-]{6,10}$/;
        //密码长度为6-10的小写字母、大写字母
        var regPassword = /^[a-zA-Z]{6,10}$/;
        //验证码为4位纯数字
        var regCode = /^\d{4}$/;
        document.querySelector('.btn-submit').onclick=function(e){
            //初始化设置错误信息为空
            oMsg.innerHTML = '';
            //判断用户名是否为空
            if(oUsername.value==''
            ||oUsername.value==null
            ||oUsername.value==undefined
            ||oUsername.value.length==0
            ){
                oMsg.innerHTML = '用户名不能为空!';
                oMsg.style.color= 'red';
                return false;
            }
            //判断用户名格式是否正确
            if(!regUsername.test(oUsername.value)){
                oMsg.innerHTML = '账号长度为6-10的小写字母-大写字母-下划线-中划线!';
                oMsg.style.color= 'red';
                return false;
            }
            //判断密码
            if(oPassword.value==''
            ||oPassword.value==null
            ||oPassword.value==undefined
            ||oPassword.value.length==0
            ){
                oMsg.innerHTML = '密码不能为空!';
                oMsg.style.color= 'red';
                return false; 
            }
            //判断密码正则
            if(!regPassword.test(oPassword.value)){
                oMsg.innerHTML = '密码长度为6-10的小写字母-大写字母!';
                oMsg.style.color= 'red';
                return false; 
            }
            //验证码
            if(oCode.value==''
            ||oCode.value==null
            ||oCode.value==undefined
            ||oCode.value.length==0
            ){
                oMsg.innerHTML = '验证码不能为空!';
                oMsg.style.color= 'red';
                return false; 
            }
            if(!regCode.test(oCode.value)){
                oMsg.innerHTML = '验证码必须是4位数字!';
                oMsg.style.color= 'red';
                return false; 
            }
            console.log('sucess...');
            $.ajax({
                url:'https://cache.iminutes.cn/api/soft/qlogin.html',
                type:"POST",
                data:{
                    username:oUsername.value,
                    password:oPassword.value,
                    code:oCode.value
                },
                dataType:'json',
                success:(res)=>{
                    console.log(res);
                    if(res.status==200){
                        console.log('************777');
                        //将服务端返回的用户信息保存在本地存储中
                        localStorage.setItem('username',res.data.username);
                        //让2s之后跳转到首页
                        setTimeout(function(){
                            window.location.href='index.html';
                        },2000);
                    }else{
                        alert('登录异常!');
                    }
                }
            });


            //阻止默认事件
            e.preventDefault();
        }
        
        $('#form_login').keydown(function(event){
            if (event.keyCode == 13) {
                $('.btn-submit').click();
            }
        });
    });
</script>
</body>
</html>